<div style="font-weight:bold;font-size:20px;margin-top: 20px;">${serialNumber}、人口流动与经济指标情况</div>
<div style="text-indent: 2em;font-size:20px;margin-top: 20px;line-height: 35px;">
    根据基础资源库、一码通资源库，结合海南社会管理信息化平台网信大数据系统相关情报数据，分析岛内人口流动与经济发展走势及经济贸易安全，掌握宏观经济指标情况。如下图所示为人口流动与经济发展走势变化关系：
</div>
<div id="myecharts" style="width: 1000px; height: 400px; margin: 0 auto; margin-top: 20px"></div>

<script>
    (function () {

        $(document).ready(function () {
            var result = [
                {
                    type: '人口数量',
                    datas:  [{"count": "1203", "time": "2022-06-20"}, {"count": "1230", "time": "2022-06-21"}],
                    /*datas: ${hainanPermanentPopulationDtoList}*/
                },
                {
                    type: 'GDP',
                    datas:  [{"count": "479.67", "time": "2022-06-20"}, {"count": "134.67", "time": "2022-06-21"}],
                    /*datas: ${hainanGdpDtoList}*/
                },
            ];
            // 四、人口流动与经济指标情况
            var myecharts = echarts.init(document.getElementById("myecharts"));
            var series = getSCategory(result).series;
            var xCategory = getSCategory(result).xCategory;
            var legend = ['人口数量', 'GDP'];
            var optionLine = getOption(xCategory, series, '人口流动与经济发展走势变化关系', legend, ['#4b91ff', '#f2637b', '#fad337']);
            myecharts.setOption(optionLine);
        })
        function getOption(xCategory, series, title, legend, color) {
            return {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line",
                    },
                    formatter (params) {
                        let popContent = '<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[0].color+';"></span>' + (params[0].data + "万") +'</p>'
                        let gdpContent = '<p><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[1].color+';"></span>' + (params[1].data + "亿") +'</p>'
                        return popContent + gdpContent
                    }
                },
                color: color? color: ['#4b91ff'],
                legend: {
                    show: legend?true: false,
                    data: legend,
                    icon: 'circle',
                    right: '4%'
                },
                grid: {
                    left: "8%",
                    right: "4%",
                    bottom: "5%",
                    containLabel: false,
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xCategory,
                },
                yAxis: [{
                    type: 'value',
                    name:'人口数量',
                },
                {
                    type: 'value',
                    name:'GDP',
                }],
                series: series
            }
        }
        function getSCategory(result) {
            var series = [], xCategory = [], data = [];
            $.each(result,function(index,item) {
                var obj = { name: '', type: 'line', data: [], yAxisIndex: index };
                var count = $.map(item.datas, function(n, i){ return n.count; });
                if(index===0) {
                    xCategory = $.map(item.datas, function(n, i){ return n.time; })
                }
                obj.name = item.type;
                obj.data = count;
                series.push(obj);
            });
            return {
                series,
                xCategory
            }
        }
    })()
</script>